<template>
<Row class="layout-content-body">

  <dtable :columns="columns" :dataAll="dataAll" 
  :totals="totals"
  @refresh="refresh"  @changePage="changePage" @search="getall" 
  @changeSize="changeSize"  :loading="loading"></dtable>
  <Modal title="服务实例信息" v-model="editData" :mask-closable="false" class-name="editm" @on-ok="asyncOK" @on-cancel="asyncCancel">
    <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
      <Form-item label="名称" prop="Name">
        <Input v-model="formItem.Name" placeholder="请输入" disabled></Input>
      </Form-item>
      <Form-item label="设备编码" prop="Macid">
        <Input v-model="formItem.Macid" placeholder="请输入" @on-enter="asyncOK"></Input>
      </Form-item>
      <Form-item label="地址" prop="Address">
        <Input v-model="formItem.Address" placeholder="请输入" @on-enter="asyncOK"></Input>
      </Form-item>
      <Form-item label="电话" prop="Phone">
        <Input v-model="formItem.Phone" placeholder="请输入" @on-enter="asyncOK"></Input>
      </Form-item>
      <Form-item label="联系人" prop="Contact">
        <Input v-model="formItem.Contact" placeholder="请输入" @on-enter="asyncOK"></Input>
      </Form-item>
      <Form-item label="系统账号" prop="Account">
        <Input v-model="formItem.Account" placeholder="请输入" @on-enter="asyncOK"></Input>
      </Form-item>
      <Form-item label="说明" prop="Remark">
        <Input v-model="formItem.Remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入...">
        </Input>
      </Form-item>
    </Form>
  </Modal>
  <Modal @on-ok="viewOk" @on-cancel="viewOk"
    title="相关信息" v-model="viewBool" :mask-closable="false" class-name="editm">
    <Timeline >
        <TimelineItem v-for="item in viewData" :key="item.time">
          <p class="time">{{ item.time |dateFormat  }}</p>
          <p class="content">{{item.name}}  {{item.user}}</p>
        </TimelineItem>
    </Timeline>
  </Modal>
</Row>
</template>

<script>
import { timeFormat, currency } from "@/common/filter";
import dtable from "@/components/table/btable.vue"; //采用biztable
import moment from "moment";
export default {
  data() {
    return {
      viewBool: false,
      viewData: [],
      loading: false, //数据刷新遮罩层
      busyName: "服务实例",
      busyTable: "yjk_serv",
      columns: [
        //多选框
        {
          title: "名称",
          key: "Name",
          sortable: true
        },
        {
          title: "客户名称",
          key: "CustName",
          sortable: true
        },
        {
          title: "订单名称",
          key: "OrderName",
          sortable: true
        },
        {
          title: "PUID",
          key: "Macid",
          sortable: true
        },
        {
          title: "型号",
          key: "Model",
          sortable: true
        },
        {
          title: "地址",
          key: "Address",
          sortable: true
        },
        {
          title: "电话",
          key: "Phone",
          sortable: true
        },
        {
          title: "联系人",
          key: "Contact",
          sortable: true
        },
        {
          title: "账号",
          key: "Account",
          sortable: true
        },
        {
          title: "备注",
          key: "Remark",
          sortable: true
        },
        {
          title: "责任人",
          key: "Creater",
          sortable: true
        },
        {
          title: "操作",
          width: 140,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.viewItem(params.row.Id);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "info",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.toService(params.row.Id);
                    }
                  }
                },
                "售后"
              )
            ]);
          }
        }
      ], //表格样式
      ruleValidate: {
        Name: [
          {
            required: true,
            message: "名称不能为空",
            trigger: "blur"
          }
        ],
        Macid: [
          {
            required: true,
            message: "设备编码不能为空",
            trigger: "blur"
          }
        ],
        Address: [
          {
            required: true,
            message: "地址不能为空",
            trigger: "blur"
          }
        ],
        Phone: [
          {
            required: true,
            message: "电话不能为空",
            trigger: "blur"
          }
        ],
        Contact: [
          {
            required: true,
            message: "联系人不能为空",
            trigger: "blur"
          }
        ]
      }, //数据编辑表单验证规则
      dataAll: [], //表格数据来源
      templist: [],
      formItem: {},
      dataShow: true, //是否显示表格数据查看表单
      showTemp: false,
      editData: false,
      totals: 10,
      orderData: {
        edit: false,
        temp: ""
      },
      pagedata: {
        pagesize: 10,
        page: 1,
        searchKey: "",
        sortby: ["Ctime"],
        order: ["desc"],
        query: {
          Status: "1",
          Isdelete: "0"
        }
      }
    };
  },
  components: {
    dtable
  },
  filters: {
    dateFormat: (value) =>{
      if (!value) return "";
      let date = moment.utc(value)
      if (!date.isValid()) {
        return ""
      }
      return date.format("YYYY-MM-DD");
    }
  },
  computed: {},
  watch: {},
  methods: {
    viewOk() {
      this.viewBool = false;
      this.viewData = [];
    },
    toService(id) {
      if (id) {
        this.$router.push({
          name: "售后服务",
          params: {
            servId: id
          }
        });
      }
    },
    viewItem(id) {
      if (id) {
        this.$api.getServiTimeLine({ servId: id }).then(res => {
          if (res.code == 0) {
            this.viewData = res.Data;
            this.viewBool = true;
          }
        });
      }
    },
    refresh() {
      this.getall(this.pagedata);
    },
    getall(pd) {
      this.loading = true;
      this.$api.GetServAll(pd).then(res => {
        if (!res.error) {
          console.log(res.Data);
          this.dataAll = res.Data.data;
          this.totals = res.Data.total;
        } else {
          this.$Message.error(res.message);
        }
      });
      this.loading = false;
    },
    edit(index) {
      this.formItem = index;
      this.editData = true;
    },
    asyncOK() {
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          this.$api.updateServ(this.formItem).then(res => {
            if (!res.error) {
              this.getall();
              this.$Message.success(res.message);
            } else {
              this.$Message.error(res.message, 4);
            }
          });
        } else {
          this.$Message.error("表单验证失败!");
        }
      });
      this.editData = false;
      this.$refs["editForm"].resetFields();
    },
    asyncCancel() {
      this.refresh();
      this.$refs["editForm"].resetFields();
    },
    handelSelect(row) {
      this.$emit("handelSelect", row);
    },
    //      改变页码大小
    changeSize(current) {
      this.pagedata.page = current;
      this.getall(this.pagedata);
    },
    //      改变页码
    changePage(current) {
      // console.log(current);
      this.pagedata = current;
      this.getall(this.pagedata);
    },
    //      排序
    sortOrder(current) {
      console.log(current);
      this.pagedata = current;
      this.getall(this.pagedata);
    }
  },
  mounted() {
    this.getall(this.pagedata);
  }
};
</script>
